<template>
  <div class="driver-score">
    <div class="driverInfo">
        <div class="driverImg">
            <img src="this.avatar" alt="">
        </div>
        <p class="drivernm">{{this.drivername}}</p>
        <p>{{this.carNum}} {{this.models}}</p>
        <div class="star">
            <div class="starlis">
                <ul>
                    <li v-for="n in this.driverRates">
                        <img src="../../assets/images/daxingxing@2x.png" alt="">
                    </li>
                </ul>
                <span>{{this.singleNum}}单</span>
            </div>
        </div>
        <div class="phone">
            <a href="javascript:;">
                <img src="../../assets/images/dianhua@2x的副本.png" alt="">
            </a>
        </div>
    </div>   
    <div class="paySuccess">
        <fieldset>
            <legend>成功支付</legend>
        </fieldset>
        <span>{{this.money}}<i>元</i></span>
    </div>
    <div class="evaluate">
        <fieldset>
            <legend>评价司机</legend>
        </fieldset>
        <div id="shoplist">
           <p class="all" >
                <input type="radio" name="b" value="0" v-model="inputdata"/>
                <span>★</span>
                <input type="radio" name="b" value="1" v-model="inputdata"/>
                <span>★</span>
                <input type="radio" name="b" value="2" v-model="inputdata" />
                <span>★</span>
                <input type="radio" name="b" value="3" v-model="inputdata" />
                <span>★</span>
                <input type="radio" name="b" value="4" v-model="inputdata" />
                <span>★</span>
                <input type="radio" name="b" value="5" v-model="inputdata" />
                <span>★</span>
          </p>
        </div>
        <!-- <ul class="imgul">
            <li><img src="../../assets/images/daxingxing@2x.png" alt=""></li>
            <li><img src="../../assets/images/daxingxing@2x.png" alt=""></li>
            <li><img src="../../assets/images/daxingxing@2x.png" alt=""></li>
            <li><img src="../../assets/images/daxingxing@2x.png" alt=""></li>
            <li><img src="../../assets/images/daxingxing@2x.png" alt=""></li>
        </ul> -->
        <div class="labSelect clearfix">
            <h3>请选择标签</h3>
            <ul id="uls">
                <li @click="selected" id="lis" v-for="item in this.orderTips" :position="item" :key="item.id"><p>{{ item.name }}</p></li>
            </ul>
        </div>
         <div class="subeva">
            <textarea v-model="comment" placeholder="请留下您的宝贵意见和建议,我们将更加努力,为您带来更加优质的服务..."></textarea>
            <button @click="userEvaluateOrder()">提交评价</button>
        </div>
    </div>
   </div>
</template>
<script>
import {mapGetters, mapMutations} from 'vuex'
import axios from 'axios'
import {evaluateOrder, carTips,getOrder} from 'api/api'
 /* eslint-disable */
export default {
  name: 'shoplist',
  data () {
    return {
      inputdata: '5',
      payStatus: '',
      driverPhone: '',
      driverRates: 5,
      avatar: '',
      drivername: '徐师傅',
      carNum: '鄂A23U21',
      models: '大众',
      singleNum: '48',
      money: '80.00',
      orderTips: [],
      comment: ''
      // 订单详情接口返回需要的参数
    }
  },
  watch: {
    inputdata (value) {
      console.log(value)
    }
  },
  computed: {
    ...mapGetters([
      'timeInfo',
      'destination',
      'pickType'
    ])
  },
  mounted () {
    this.getOrderdtail()
    this.evaluateTip()
    this.init()
  },
  methods: {
    // 获取订单详情
    getOrderdtail () {
      let orderNum = localStorage.getItem('orderNum')
      let token = localStorage.getItem('token')
      axios.get(getOrder + orderNum + '/' + token + '/getPassengerOrderPriceDetail')
      .then((res) => {
        console.log(res)
        this.avatar = res.rsult.avatar
        this.drivername = res.result.driverName  // 司机名
        this.carNum = res.result.driverLicense // 司机牌照
        this.models = res.result.model  // 司机车型
        this.driverRates = res.result.driverRates // 司机星数
        this.singleNum = res.result.orderNumber  // 司机接单数
        this.payStatus = res.result.payStatus  // 订单支付状态
        this.money = res.rsult.totalPrice  // 订单总价格
      }).catch(error => {
        console.log(error)
      })
    },
    init () {
      if (localStorage.getItem('token') === null){
        this.$router.push('/login')
      }
    },
    // 获取订单标签
    evaluateTip () {
      axios.get(carTips).then((res) => {
        console.log(res)
        this.orderTips = res.data.result  // 获取所有的评价标签
        console.log(this.orderTips)
      }).catch(error => {
        console.log(error)
      })
    },
    // 评价订单
    userEvaluateOrder () {
      let orderNum = localStorage.getItem('orderNum')
      axios.post(evaluateOrder, {
        'param': {
          'fields': {
            'orderNo': orderNum,
            'rate': this.inputdata,
            'commentType': '',
            'commentContent': this.comment
          }
        }
      }).then((res) => {
        console.log(res)
      }).catch(error => {
        console.log(error)
      })
    },
    selected () {
      var ul = document.getElementById('uls')
      var links = ul.getElementsByTagName('li')
      for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
          this.className = 'lis active'
        }
      }
    },
    ...mapMutations({
      setSearchBoxInfo: 'SET_SEARCHBOXINFO',
      setShowSearchBox: 'SET_SHOWSEARCHBOX',
      setShowEnd: 'SET_SHOWEND',
      setDestination: 'SET_DESTINATION',
      setEstimatePrice: 'SET_ESTIMATEPRICE'
    })
  }
}
</script>
<style lang="css" scoped>
.driver-score{
    width: 100%;
    height: 100%;
    margin-top: 50px;
}
.driverInfo{
    position: relative;
    height: 100px;
}
.driverInfo .driverImg{
    width: 50px;
    height: 50px;
    border: 1px solid red;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    left: 15px;
}
.driverInfo .phone{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    right: 30px;
    top: 20px;
}
.driverInfo .phone a img{
    width: 100%;
}
.driverInfo p{
   text-align: left;
   padding-left: 100px;
   line-height: 30px;
   font-size: 14px;
}
.driverInfo .star{
    height: 20px;
    padding-left: 100px;
}
.driverInfo .star .starlis ul li{
    float: left;
    width: 20px;
    margin-right: 5px;
    height: 20px;
}
.driverInfo .star .starlis ul li img{
    width: 100%;
    height: 100%;
}
.driverInfo .star .starlis span{
    float: left;
    line-height: 25px;
}
.paySuccess{
    height: 103px;
}
.paySuccess span{
    display: inline-block;
    font-size: 36px;
    margin-top: 27px;
    margin-bottom: 50px;
}
.paySuccess span i{
    font-size: 14px;
    font-style: normal;
}
.evaluate .imgul{
    margin-left: 26px;
    height: 100px;
}
.evaluate ul li{
    float: left;
    width: 50px;
    height: 50px;
    margin-top: 21px;
    margin-right: 18px;
}
.evaluate ul li img{
    width: 100%;
}
.evaluate .labSelect{
    width: 100%;
}
.evaluate .labSelect h3{
   text-align: left;
   padding-left: 20px;
}
.evaluate .labSelect ul {
    width: 100%;
    margin-top: 10px;
}
.evaluate .labSelect ul li{
    height: 40px;
    margin: 0;
    width: 30%;
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    border-radius: 5px;
    color: rgb(153,153,153);
    line-height: 20px;
    border: 1px solid  rgb(153,153,153);
    box-sizing: border-box
}
.evaluate .labSelect ul li p{
    line-height: 40px;
    height: 100%;
    display: block;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
.evaluate .subeva {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.subeva textarea {
  height: 106px;
  width: 95%;
  font-size: 14px;
  outline: none;
  padding: 5px;
  color: rgb(153, 153, 153);
  border: 1px solid rgb(153, 153, 153);
  margin: 0;
}
.subeva button {
  margin-top: 20px;
  width: 100%;
  height: 50px;
  border: none;
  resize: none;
  border-radius: 5px;
  margin-bottom: 10px;
  background-color: #222222;
  color: #fff;
  font-size: 16px;
}
.active{
  background-color: rgba(0, 0, 0, 0.4);
}
.active p {
 color: #fff
}
fieldset{
  width: 90%;
  margin: 0 auto;
  padding: 5px;
  margin-top: 20px;
  border: 1px solid rgb(153, 153, 153);
  border-left: none;
  border-right: none;
  border-bottom: none;
}
fieldset legend{
    width: 90px;
    font-size: 14px;
    color: rgb(153, 153, 153)
}


.all>input{opacity:0;position:absolute;width:2em;height:2em;margin:0;}

.all>input:nth-of-type(1),

.all>span:nth-of-type(1){display:none;}

.all>span{font-size:4em;color:gold;margin: 0px 5px;

-webkit-transition:color
.2s;

transition:color
.2s;

}

.all>input:checked~span{color:#666;}

.all>input:checked+span{color:gold;}

</style>